Dodaj pływający przycisk polecenia

Wypróbuj Compose
Jetpack Compose to zalecany zestaw narzędzi interfejsu na Androida. Dowiedz się, jak dodawać komponenty w Compose.
Pływający przycisk polecenia →

Pływający przycisk polecenia (FAB) to okrągły przycisk, który wywołuje główne działanie w interfejsie aplikacji. Z tej strony dowiesz się, jak dodać przycisk FAB do układu, dostosować jego wygląd i reagować na kliknięcia.

Więcej informacji o projektowaniu pływającego przycisku polecenia w aplikacji zgodnie z wytycznymi Material Design znajdziesz też w artykule Przyciski: pływający przycisk polecenia.

Rysunek 1. Pływający przycisk polecenia

Dodawanie pływającego przycisku polecenia do układu

Poniższy kod pokazuje, jak element FloatingActionButton powinien wyglądać w pliku układu: 

<com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:src="@drawable/ic_my_icon"
        android:contentDescription="@string/submit"
        android:layout_margin="16dp" />

Domyślnie kolor przycisku FAB jest określany przez atrybut colorAccent, który możesz dostosować za pomocą palety kolorów motywu.

Inne właściwości pływającego przycisku działania możesz skonfigurować za pomocą atrybutów XML lub odpowiednich metod, takich jak:

  • Rozmiar FAB, używając atrybutu app:fabSize lub metody setSize().
  • Kolor efektu falowania przycisku FAB, używając atrybutu app:rippleColor lub metody setRippleColor().
  • Ikona FAB, za pomocą atrybutu android:src lub metody setImageDrawable().

Reagowanie na kliknięcia przycisków

Następnie możesz zastosować View.OnClickListener do obsługi kliknięć FAB. Na przykład ten kod wyświetla znak Snackbar, gdy użytkownik kliknie przycisk FAB:

Kotlin

val fab: View = findViewById(R.id.fab)
fab.setOnClickListener { view ->
    Snackbar.make(view, "Here's a Snackbar", Snackbar.LENGTH_LONG)
            .setAction("Action", null)
            .show()
}

Java

FloatingActionButton fab = findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Snackbar.make(view, "Here's a Snackbar", Snackbar.LENGTH_LONG)
                .setAction("Action", null).show();
    }
});

Więcej informacji o możliwościach FAB znajdziesz w dokumentacji interfejsu API FloatingActionButton.